<template>
  <div class="search-body">
    <van-icon class="arrow-left" name="arrow-left" color="#fff"/>
    <div class="home-search">
      <div class="location">
        <span class="address">杭州</span>
        <van-icon name="play"/>
        <i class="line">|</i>
        <van-icon name="search" size="15" />
        <span class="qing-search">请输入小区或地址</span>
      </div>
    </div>
    <van-icon class="icon-wai" name="aim" color="#fff"/>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.search-body{
  position:absolute;
  height: 50px;
  width: 100%;
  background-color: #21b97a;
  .arrow-left {
    position: fixed;
    top: 14px;
    left: 10px;
    font-size: 20px;
    z-index: 2;
  }
  .home-search {
    position:absolute;
    width: 75%;
    margin-top: 8px;
    margin-left: 12.5%;
    background-color: #fff;
    height: 34px;
    line-height: 34px;
    z-index: 1;
    border-radius: 3px;
  .location {
    font-size: 14px;
    color: #333;
    .address {
      padding-left: 10px;
    }
  }
  .line {
    margin: 0 10px;
    color: #ddd;
  }
  .qing-search {
    font-size: 13px;
    color: #9c9FA1;
    margin-left: 10px;
  }
  }
  .icon-wai {
    position: fixed;
    top: 14px;
    right: 10px;
    font-size: 25px;
    z-index: 2;
  }
  }
</style>
